<template>
    <view>
        <view class="post-bottom-nav" :style="{'bottom':postList.bottomnavHeight}" @click.stop>
            <view class="bottom-nav-title">
                <view class="nav-title-item" >
                    <text @click.stop="chooseNotname">{{no_name==1?'匿名':'所有人可见'}}</text>
                </view>
                <view class="nav-title-item">
                    <text v-if="postNames.name?false:true" @click.stop="onCircle">选择圈子</text>
                    <text v-if="postNames.name?true:false" @click.stop="onCircle">{{postNames.name}}</text>
                </view>
                <view class="nav-title-item">
                    <text @click.stop="chooseSort" v-if="postNames.name?true:false">{{postSorts.name?postSorts.name:'添加分类'}}</text>
                </view>
                <view class="nav-title-item">
                    <button size="mini" @click.stop="this.$parent.onSendPostArticle">发布</button>
                </view>
            </view>
            <view class="bottom-nav-btn">
				<view class="bottom-nav-item" @click.stop="this.$parent.vote">
					<img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/vote.png"/>
				 </view>
				
                <!-- <view class="bottom-nav-item">
					
                     <img src="/static/img/post-topic.png"/>
                 </view> -->
                <view class="bottom-nav-item">
                    <img src="/static/img/post-biaoqing.png" @click.stop="chooseEmoji"/>
                </view>
				<view class="bottom-nav-item">
				   <img src="/static/img/post-@.png" @click.stop="aitUsers"/>
				</view>
                <view class="bottom-nav-item">
                    <img src="/static/img/post-tupian.png" v-if="postType!='video'" @click.stop="this.$parent.chooseImage"/>
                    <img src="/static/img/post-tupian.png" v-if="postType=='video'"/>
                </view>
                <view class="bottom-nav-item">
                    <img src="/static/img/post-video.png" v-if="postType!='image'" @click.stop="this.$parent.chooseVideo"/>
                    <img src="/static/img/post-video.png" v-if="postType=='image'"/>
                </view>
            </view>

        </view>
        <!--        抽屉栏-->
        <view class="post-bottom-layer" v-if="postList.hideEmoji">
            <!-- 表情 -->
            <swiper class="emoji-swiper" indicator-dots="true" duration="150">
                <swiper-item v-for="(page,pid) in emojiList" :key="pid">
                    <view v-for="(em,eid) in page" :key="eid" @click.stop="addEmoji(em)">
                        <image mode="widthFix" :src="'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/emoji/'+em.url"></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>
<!--		&lt;!&ndash;        覆盖页面&ndash;&gt;-->
<!--		        <view class="ait-users-list" @click.stop v-if="AitShow" :style="{top:navigationbarHeight+'px'}">-->
<!--		            <view class="ait-list-header">-->
<!--		                <view class="ait-header-left" @click="offAitUsersList">取消</view>-->
<!--		                <view class="ait-header-center" v-if="searchShow">用户列表</view>-->
<!--		                <view class="ait-header-right" v-if="searchShow" @click="searchShow=false"><icon class="weui-icon-search_in-box" type="search" size="20"></icon></view>-->
<!--		                <view class="ait-header-search" v-if="!searchShow">-->
<!--		                    <input type="text" placeholder="搜索" auto-focus/>-->
<!--		                </view>-->
<!--		            </view>-->
<!--		            <view class="ait-list-item">-->
<!--		                <view class="ait-user-item" v-for="item in AitUserList" :key="item.id" @click="addAitUser(item)">-->
<!--		                    <view class="ait-users-head"><img :src="item.basicUserInfo.photo_url"/></view>-->
<!--		                    <view class="ait-users-name">{{item.basicUserInfo.nickname}}</view>-->
<!--		                </view>-->
<!--		            </view>-->
<!--		        </view>-->
    </view>
</template>

<script>
    export default {
        name: "postbottom",
        props:{
            fatherValue:{
                required: true
            },
            postName:{
                required: true
            },
            postSort:{
                required: true
            },
            NotName:{
                required: true
            },
            altUserList: {
                required: true
            },
            postType:{
                required: true
            }
        },
        data(){
            return{
                postNames: this.postName,
				//@用户列表
				navigationbarHeight:getApp().globalData.navStyle.navigationbarHeight,
                postList: this.fatherValue,
                postSorts: this.postSort,
                no_name: this.NotName,
                postTypes: this.postType,
                altUserLists : this.altUserList,
                emojiList:[
                    [{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
                    [{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
                    [{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
                    [{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
                    [{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]
                ],
                searchShow:true
            }
        },
        mounted(){
        },
        methods:{
			//获取圈子帖子默认分类
			async getEnableArticleClassify(){
				this.postSorts=''
			    let params = {
			        circle_id: this.postNames.id,
			        user_token: uni.getStorageSync('userToken'),
			    }
			    const res = await this.$api.getEnableArticleClassify(params);
			    if (res.data.level == 'success'){
			        // console.log(res)
			        
			        if (res.data.data.length==0){
			            uni.showToast({
			                icon:'none',
			                title:'该圈子暂时没有分类~'
			            })
			        }else{
						let data = res.data.data[0];
						this.postSorts={
							id:data.classify_id,
							name:data.classify_name
						}
					}
			    }else {
			        uni.showToast({
			            icon:'none',
			            title:res.data.message
			        })
			    }
			},
            //点击@用户
            aitUsers(){
                this.postList.bottomnavHeight = '0px';
                this.postList.hideEmoji = false;
                let altUserLists = JSON.stringify(this.altUserLists);
                uni.navigateTo({
                    url: '/pages/posting/selectUser/selectUser?alt_user_list='+altUserLists
                })
                // this.AitShow = true;
                // this.getFollowUserList();
            },
            //点击选择圈子
            onCircle(){
                this.postList.bottomnavHeight = '0px';
                this.postList.hideEmoji = false;
                uni.navigateTo({
                    url: '/pages/posting/selectCircles/selectCircles'
                })
            },
			// addAitUser(item){
			// 	//添加@用户
			// 	this.$emit('addAitUser',item);
            //     this.AitShow = false;
			// },
            // 选择表情
            chooseEmoji(){
                if(this.postList.hideEmoji){
                    this.postList.hideEmoji = false;
                    this.postList.bottomnavHeight = '0px';
                }else{
                    this.postList.hideEmoji = true;
                    this.postList.bottomnavHeight = '46vw';
                }
            },
            //添加表情
            addEmoji(em){
                console.log(em)
                if (this.$parent.postEntry == 'title'){
                    this.$parent.postTitle+=em.alt;
                }else {
					
                    this.$parent.postContent+=em.alt;
                }
            },
            //选择分类
            chooseSort(){
                this.postList.bottomnavHeight = '0px';
                this.postList.hideEmoji = false;
                uni.navigateTo({
                    url: '/pages/posting/selectSort/selectSort?circle_id='+this.postNames.id
                })
            },
            //选择是否所有人可见
            chooseNotname(){
                if (this.no_name){
                    this.no_name = '';
                    this.no_name = 0;
                } else {
                    this.no_name = '';
                    this.no_name = 1;
                }
            },
            //选择是否添加标题
            titleChange(e){
                this.$parent.titleYN = e.detail.value;
            }
        },
        watch:{
            postList(newValue, oldValue){
                this.$emit('update:fatherValue',newValue)
            },
            fatherValue(newValue){
                this.postList = newValue
            },
            postName(newValue){
                this.postNames = newValue;
            },
            postNames(newValue, oldValue){
                this.$emit('update:postName',newValue)
				
				this.getEnableArticleClassify()
            },
            postSort(newValue){
                this.postSorts = newValue;
            },
            postSorts(newValue, oldValue){
				console.log(newValue,666)
                this.$emit('update:postSort',newValue)
            },
            NotName(newValue){
                this.no_name = newValue;
            },
            no_name(newValue, oldValue){
                this.$emit('update:NotName',newValue)
            },
            altUserList(newValue){
                this.altUserLists = newValue;
            },
            altUserLists(newValue, oldValue){
                this.$emit('update:altUserList',newValue)
            },
            postType(newValue){
                this.postTypes = newValue;
            },
            postTypes(newValue, oldValue){
				
                this.$emit('update:postType',newValue)
            }
        }
    }
</script>

<style scoped lang="scss">
	@import "../../../static/scss/inputstyle";
    .post-bottom-nav{
        background: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 96vw;
        padding: 2vw;
        box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0,0,0,0.06);
        /*box-shadow: 0rpx 0rpx 10rpx 2rpx #d2d2d2;*/
        z-index: 21;
        .bottom-nav-title{
            clear: both;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 0rpx 30rpx 40rpx 20rpx;
            .nav-title-item{
                width: 25%;
                text-align: center;
                padding:0 10rpx;
                text{
                    display: block;
                    font-size: 24rpx;
                    background: #F7F7F7;
                    border-radius: 24rpx;
                    padding:10rpx 5rpx;
                    width: 95%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                button{
                    width: 100%;
                    margin-left: 20%;
                    height: 60rpx;
                    font-weight: bold;
                    background: #FFE226;
                    border-radius: 30rpx;
                    line-height: 60rpx;
                    padding: 0;
                }
            }
        }
        .bottom-nav-btn{
            clear: both;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .bottom-nav-item{
                /*display: inline-block;*/
                margin: 0 2vw;
                width: 20%;
                text-align: center;
                img{
                    width: 32px;
                    height: 32px;
                }
            }
        }
    }
    .post-bottom-layer{
        width: 96%;
        height: 42vw;
        padding: 2vw 2%;
        background-color: #ffffff;
        border-top: solid 2rpx #ddd;
        position: fixed;
        z-index: 20;
        bottom: 0;
        left: 0;
        .emoji-swiper{
            height: 40vw;
            swiper-item{
                display: flex;
                align-content: flex-start;
                flex-wrap: wrap;
                view{
                    width: 12vw;
                    height: 12vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    image{
                        width: 8.4vw;
                        height: 8.4vw;
                    }
                }
            }
        }
    }
    .post-sort-layer{
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0vh;
        left: 0vw;
        background: rgba(0, 0, 0, 0.4);
        z-index: 30;
        .sort-content{
            width: 80vw;
            height: 80vh;
            position: fixed;
            top: 10vh;
            left: 10vw;
            background: #eeeeee;
            z-index: 2000;
            border-radius: 10rpx;
            .sort-content-title{
                height: 5vh;
                padding: 20rpx;
                border-bottom: 2rpx solid #acacac;
                .text{
                    line-height: 80rpx;
                    font-size: 36rpx;
                    button{
                        vertical-align: middle;
                        float: right;
                        height: 5vh;
                        line-height: 5vh;
                    }
                }
            }
            .sort-content-item{
                padding:0 10rpx;
                height: 70vh;
                overflow-x: hidden;
                overflow-y: scroll;
                .sort-list-item{
                    height: 100rpx;
                    padding: 0 30rpx;
                    line-height: 100rpx;
                    font-size: 36rpx;
                    border-bottom: 1rpx solid #d9d9d9;
                }
            }
        }
    }
</style>